import React from 'react';
import { RefreshCw } from 'lucide-react';
import Logo from './Logo';

export const Header: React.FC = () => {
  const handleRefresh = () => {
    // 浏览器环境，刷新页面
    window.location.reload();
  };

  return (
    <header className="bg-white shadow-sm border-b border-gray-200">
      <div className="w-full px-4 py-3">
        <div className="flex items-center justify-between w-full">
          {/* Left Section - Logo, Title and Description */}
          <div className="flex items-center space-x-3">
            <Logo className="w-8 h-8 text-blue-600" />
            <div className="flex flex-col">
              <h1 className="text-lg font-semibold text-gray-900 tracking-tight">AI智能Git效率助手</h1>
              <p className="text-gray-500 text-xs font-medium">智能化工作报告生成平台</p>
            </div>
          </div>
          
          {/* Right Section - Version and Refresh */}
          <div className="flex items-center space-x-2 ml-auto">
            {/* Version Badge */}
            <div className="hidden sm:flex items-center px-2 py-1 bg-gray-100 rounded-full border border-gray-200">
              <span className="text-xs font-semibold text-gray-600">v2.0.0</span>
            </div>
            
            {/* Refresh Button */}
            <button
              onClick={handleRefresh}
              className="group relative p-2 bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition-all duration-200"
              title="刷新页面"
            >
              <RefreshCw className="w-4 h-4 text-gray-600 group-hover:rotate-180 transition-transform duration-300" />
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};